<template>
	<view class="app-discuss">
		<view class="app-discuss__header bg-white e-flex e-flex-between">
			<view class="app-discuss__header-scroll">
				<scroll-view scroll-x="true">
					<view class="e-flex">
						<view class="app-discuss__header-scroll__item e-flex e-m-r-54"
							:class="{'c-primary fw-500':classifyId === item.id}" v-for="item in classifyList"
							:key="item.id" @tap="classifyId = item.id">
							<text>{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<image :src="$staticPath('discuss/add.png')" class="img-40" @tap="$goTo('/pages/user/discuss/add')"></image>
		</view>
		<view class="app-discuss__content">
			<discussItem v-for="item in discussList" :key="item.id" :info="item"></discussItem>
			<empty :text="$t('classify.暂无内容')" :icon="$staticPath('default_img.png')" :show="!discussList.length"></empty>
			<load-more v-if="discussList.length" :showLoad="showLoad"></load-more>
		</view>
	</view>
</template>

<script>
	import {
		getDiscussClassify,
		getDiscussList
	} from '@/common/request/api'
	import discussItem from './child/discuss-item.vue'
	// tabbar页面混入，包含mpShare对象
	import tabbarMixin from 'common/mixin/tabbarMixin.js'
	export default {
		props: {
			downRefresh: Boolean,
			onShow: Boolean,
			reachBottom: Boolean,
		},
		mixins:[tabbarMixin],
		components:{
			discussItem
		},
		data() {
			return {
				classifyId: '',
				classifyList: [],
				discussList: [],
				isGet: true,
				showLoad: false,
				pageNum: 1

			}
		},
		watch: {
			classifyId() {
				this.isGet = true
				this.showLoad = false
				this.pageNum = 1
				this.getData(true)
			},
			onShow(val) {
				if(val){
					this.isGet = true
					this.showLoad = false
					this.pageNum = 1
					this.getData(true)
				}
				
			},
			downRefresh(newValue) {
				if (newValue && this.onShow) {
					this.getClassify().then(() => {
						this.getData()
					})
					this.$emit('endRefresh')
				}
			},
			reachBottom(newValue) {
				if (newValue && this.onShow) {
					this.getData()
				}

			},
		},
		created() {
			this.getClassify()
		},
		methods: {
			async getClassify() {
				const res = await getDiscussClassify()
				if (res.code === 200) {
					if (res.data && res.data.length) {
						this.classifyList = res.data
						this.classifyId = res.data[0].id
					}
				}
			},
			getData(isRefresh) {
				if (this.isGet && !this.showLoad && this.classifyId) {
					let {
						pageNum,
						classifyId
					} = this
					let data = {
						pageNum,
						pageSize: 10,
					}
					this.showLoad = true
					getDiscussList(classifyId, data).then(res => {
						this.showLoad = false
						if (res.code == 200) {
							if (isRefresh) {
								this.discussList = []
							}
							let loadRes = this.$pageLoad(this.discussList, res.rows, pageNum, 10)
							this.pageNum = loadRes.pageNo
							if (this.discussList.length == res.total) {
								this.isGet = false
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-discuss {
		padding-top: calc(var(--status-bar-height) + 44px);
		min-height: calc(100vh - 50px);
		background: #F7F7F7;

		&__header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding: var(--status-bar-height) 30rpx 0 48rpx;

			&-scroll {
				width: calc(100% - 60rpx);
				flex: 0 0 calc(100% - 60rpx);
				height: 44px;

				scroll-view {
					white-space: nowrap;
					height: 44px;
				}

				&__item {
					height: 44px;
				}
			}
		}

		&__content {
			padding: 32rpx 20rpx;
		}

	}
</style>
